<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<!-- 接单者 查询信息 -->
				<view class="query-info card " v-if="!isPosts">
					<!-- 查询信息内容 -->
					<view class="header">
						<view class="payment">
							<view class="payment-text">
								实付款：¥
							</view>
							<view class="payment-number">
								{{ orderInfo.money_total }}
							</view>
						</view>
						<view class="addr">
							全国
						</view>
					</view>
					<view class="content">
						<view class="content-item">
							<view class="content-item-label">协同类型：</view>
							<view class="content-item-value">{{ orderInfo.category_title }}</view>
						</view>
						<view class="content-item">
							<view class="content-item-label">协同状态：</view>
							<view class="content-item-value">{{ orderInfo.status_title }}
							</view>
						</view>
						<view class="content-item">
							<view class="content-item-label">
								发布时间
							</view>
							<view class="content-item-value">{{ orderInfo.create_time }}
							</view>
						</view>
						<!-- <view class="content-item">
							<view class="content-item-label">剩余有效期：</view>
							<view class="content-item-value">221002200201025878
							</view>
						</view> -->
					</view>
					<view class="money-info">
						<view class="title">
							费用明细
						</view>
						<view class="money-info-item">
							<view class="money-info-item-label">
								婚姻查询跑腿费
							</view>
							<view class="money-info-item-value">
								¥100
							</view>
							<view class="money-info-item-value">
								x1
							</view>
						</view>
						<view class="money-info-item">
							<view class="money-info-item-label">
								婚姻查询跑腿费
							</view>
							<view class="money-info-item-value">
								¥100
							</view>
							<view class="money-info-item-value">
								x1
							</view>
						</view>
					</view>
				</view>



				<!-- 发布者 查询信息 -->
				<view class="query-info card posts" v-if="isPosts">
					<!-- 查询信息内容 -->
					<view class="header">
						<view class="title">
							20240506-婚姻家庭-王丽丽
						</view>
					</view>
					<view class="content">
						<view class="content-item">
							<view class="content-item-label">订单编号：</view>
							<view class="content-item-value">1234567890</view>
						</view>
						<view class="content-item">
							<view class="content-item-label">订单金额：</view>
							<view class="content-item-value">221002200201025878
							</view>
						</view>
						<view class="content-item">
							<view class="content-item-label">查询类型：
							</view>
							<view class="content-item-value">221002200201025878
							</view>
						</view>
						<view class="content-item">
							<view class="content-item-label">任务有效期(25/30)</view>
							<view class="content-item-value">
								<wd-progress :percentage="60" hide-text
									custom-class="wd-progress-custom-class-my-progress"
									:color="['#C91C1F', 'rgb(255, 153, 0)' ,'rgb(0,204, 0)' ]" />
							</view>
						</view>
					</view>
				</view>
				<!-- 发布者 任务进度 -->
				<view class="query-step card posts" v-if="isPosts">
					<!-- 查询备注内容 -->
					<view class="header">
						<view class="title">任务进度</view>
					</view>
					<view class="desc">
						<Step :stepList="stepList" :activ="1"></Step>
					</view>
				</view>
				<!-- 发布者 查询备注 -->
				<view class="query-remark card posts" v-if="isPosts">
					<!-- 查询备注内容 -->
					<view class="header">
						<view class="title">备注</view>
					</view>
					<view class="desc">
						1、婚姻情况（已婚/未婚/离婚、共几次婚姻、结婚对象）<br />
						2、生育情况（已育/未育、孩子数量、孩子性别、孩子年龄）<br />
						3、备注内的查询信息<br />
					</view>
				</view>
				<!-- 接单者能看到的信息 -->
				<template v-for="(item,index) in fData">
					<view class="query-remark card" v-if="!isPosts && item.field_comment">
						<!-- 查询备注内容 -->
						<view class="title">发布者提供信息-{{item.field_comment}}</view>
						<view class="desc">
							<template
								v-if="item.field_type === 'Textarea' || item.field_type === 'Picker' || item.field_type === 'Input'||item.field_type === 'City'">
								{{ item.value }}
							</template>
							{{ item.field_type }}
							<!-- 1、婚姻情况（已婚/未婚/离婚、共几次婚姻、结婚对象）<br />
							2、生育情况（已育/未育、孩子数量、孩子性别、孩子年龄）<br />
							3、备注内的查询信息<br /> -->
						</view>
					</view>
				</template>
				<!-- 发布者 任务内容 -->
				<view class="downloads card posts" v-if="isPosts">
					<view class="header">
						<view class="title">
							任务内容
						</view>
					</view>
					<!-- 下载资料 -->
					<view class="file-list">
						<view class="file-list-item" v-for="(item,index) in fileList">
							<view class="file-list-item-icon">
								<text class="iconfont icon-file"></text>
							</view>
							<view class="file-list-item-info">
								<view class="file-list-item-info-name text-ellipsis">
									{{ item.name }}
								</view>
							</view>
							<view class="file-list-item-delete">
								<text class="iconfont icon-xiazai"></text>
							</view>
						</view>
					</view>
				</view>
				<!-- 接单者 任务内容 -->
				<view class="downloads card" v-if="status === 2 && !isPosts">
					<view class="title">
						资料下载
					</view>
					<!-- 下载资料 -->
					<view class="file-list">
						<view class="file-list-item" v-for="(item,index) in fileList">
							<view class="file-list-item-icon">
								<text class="iconfont icon-file"></text>
							</view>
							<view class="file-list-item-info">
								<view class="file-list-item-info-name text-ellipsis">
									{{ item.name }}
								</view>
							</view>
							<view class="file-list-item-delete">
								<text class="iconfont icon-xiazai"></text>
							</view>
						</view>
					</view>
				</view>
				<!-- 接单者 任务提交 -->
				<view class="upload card" v-if="[998,3].includes(status) && !isPosts">
					<!-- 下载资料 -->
					<view class="box">
						<view class="upload-btn" v-if="[998].includes(status)">
							<wd-upload custom-class="wd-upload-custom-class-custom-btn not-show-list"
								image-mode="aspectFill" :multiple="true" @change="wdUploadChange"
								:before-upload="wdBeforeUpload">
								<view class="upload-btn-content">
									上传文件
								</view>
							</wd-upload>
						</view>
						<view class="file-list">
							<view class="file-list-item" v-for="(item,index) in fileList">
								<view class="file-list-item-icon">
									<text class="iconfont icon-shangchuan"></text>
								</view>
								<view class="file-list-item-info">
									<view class="file-list-item-info-name text-ellipsis">
										{{ item.name }}
									</view>
								</view>
								<view class="file-list-item-delete" v-if="[998].includes(status)"
									@click="deleteFile(item,index)">
									<text class="iconfont icon-guanbi"></text>
								</view>
							</view>
						</view>
					</view>
					<view class="tips">
						支持扩展名：.rar .zip .doc .docx .pdf .jpg...
					</view>
				</view>
				<!-- 发布者 任务提交 -->
				<view class="downloads card posts" v-if="isPosts &&[3].includes(status)">
					<view class="header">
						<view class="title">
							提交内容
						</view>
					</view>
					<!-- 下载资料 -->
					<view class="file-list">
						<view class="file-list-item" v-for="(item,index) in fileList">
							<view class="file-list-item-icon">
								<text class="iconfont icon-file"></text>
							</view>
							<view class="file-list-item-info">
								<view class="file-list-item-info-name text-ellipsis">
									{{ item.name }}
								</view>
							</view>
							<view class="file-list-item-delete">
								<text class="iconfont icon-xiazai"></text>
							</view>
						</view>
					</view>
				</view>

				<view class="photos card" v-if="!isPosts && [2].includes(status) && isMeet">
					<view class="title">
						打卡
					</view>
					<!-- 下载资料 -->
					<view class="desc">
						<wd-button type="success" @click="checkIn"
							custom-class="wd-button-custom-class-my-success square wd-button-custom-class-w100">
							<text class="iconfont icon-xietong"></text>
							拍照打卡
						</wd-button>
					</view>
					<view class="info">
						<view class="text">
							<view class="date">打卡时间</view>
							<view class="date">打卡时间</view>
							<view class="addr">打卡地点</view>
							<view class="addr">打卡地点</view>
						</view>
						<view class="img">
							<image src="../../static/logo.png"></image>
						</view>
					</view>
				</view>


				<view class="footer" v-if="isPosts">
					<view class="btns">
						<wd-button type="success" v-if="status === 1"
							custom-class="wd-button-custom-class-my-cancel square wd-button-custom-class-w100">
							<text class="iconfont icon-sousuo"></text>
							取消订单
						</wd-button>
						<wd-button type="success" v-if="[2,3].includes(status)"
							custom-class="wd-button-custom-class-my-cancel square wd-button-custom-class-w100">
							<text class="iconfont icon-sousuo"></text>
							联系接单人
						</wd-button>
						<wd-button v-if="[2,3,4].includes(status)" type="success"
							custom-class="wd-button-custom-class-my-success square wd-button-custom-class-w100">
							<text class="iconfont icon-xietong"></text>
							订单完成
						</wd-button>

					</view>
					<view class="after-sales" v-if="[2,998].includes(status)">申请售后</view>
				</view>

				<view class="footer" v-if="!isPosts">
					<view class="btns">
						<wd-button type="success"
							custom-class="wd-button-custom-class-my-cancel square wd-button-custom-class-w100">
							<text class="iconfont icon-sousuo"></text>
							联系发布人
						</wd-button>
						<wd-button v-if="orderInfo.status_title === '待接单'" @click="receive" type="success"
							custom-class="wd-button-custom-class-my-success square wd-button-custom-class-w100">
							<text class="iconfont icon-xietong"></text>
							确认接单
						</wd-button>
						<wd-button v-if="orderInfo.status_title === '待完成' && status!== 998" type="success"
							@click="upload"
							custom-class="wd-button-custom-class-my-success square wd-button-custom-class-w100">
							<text class="iconfont icon-xietong"></text>
							上传资料
						</wd-button>
						<wd-button v-if="status === 998" type="success" @click="submit"
							custom-class="wd-button-custom-class-my-success square wd-button-custom-class-w100">
							<text class="iconfont icon-xietong"></text>
							提交资料
						</wd-button>
					</view>
					<view class="after-sales" v-if="[2,998].includes(status)">毁约赔偿</view>
				</view>
			</view>
		</wd-config-provider>
	</app-page>

</template>

<script lang="ts">
	import { defineComponent, ref, computed } from 'vue';

	import useRouter from '@/hooks/useRouter.ts';
	import { onLoad } from '@dcloudio/uni-app';
	import { getCoopOrderInfo, doCoopReceiveOrder, getCoopMyReceiveSubmitFields } from '@/api/coop.ts';
	import Step from "@/components/step/step"
	export default defineComponent({
		name: '',
		components: { Step },
		setup(props, ctx) {
			const router = useRouter();
			// 日间light、夜间dark主题
			const theme = ref('light');
			const isPosts : any = ref(null)
			const orderInfo = ref({});
			const status = ref(1);
			const isMeet = ref(true);
			const stepList = ref([
				{ title: '发布成功（等待接单）', },
				{ title: '已接单（请耐心等待查询结果）', },
				{ title: '已提交（请及时核对查询结果）', },
				{ title: '已完成（该订单已结束）', },
			])
			const receive = () => {
				uni.$wdToast.confirm("确认接单吗？", "提示").then((res : any) => {
					doCoopReceiveOrder({
						coo_order_id: orderInfo.value['id']
					}).then((res) => {
						getOrderInfo();
					});
				});

			}
			const upload = () => {
				getCoopMyReceiveSubmitFields({
					category_id: orderInfo.value['category_id']
				}).then(res => {
					console.log(res)
				});
				status.value = 998;
			}
			const submit = () => {
				status.value = 3;
			}
			const fileList = ref([
				{ name: '111' },
				{ name: '111' },
				{ name: '111' },
				{ name: '111' },
				{ name: '111' }
			])
			const wdBeforeUpload = (event : any) => {
				fileList.value.push(...event.files);
				event.resolve(false);
			}
			// 删除文件
			const deleteFile = (file : any, fileIndex : number) => {
				fileList.value = fileList.value.filter((i : any, index : number) => {
					return fileIndex != index
				})
			}
			// 拍照打卡
			const checkIn = () => {
				// 执行拍照
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //相机打开
					success: function (res) {
						// 拿到图片上传
						console.log(JSON.stringify(res.tempFilePaths));
					}
				});
				// 获取位置 以便上传
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						console.log("res", res)
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});
			}
			const fData = computed(() => {
				const temp = JSON.parse(JSON.stringify(orderInfo.value)); // 深拷贝，避免影响原始数据。
				const exd_fields_fdr = JSON.parse(temp['exd_fields_fdr'] || '[]'); // 转换为数组。
				let list = [];
				let keys = Object.keys(temp);
				for (var i = 0; i < keys.length; i++) {
					if (keys[i].indexOf("f_") !== -1) {
						list.push({
							value: temp[keys[i]],
							...exd_fields_fdr.find((item : any) => item['field_name'] == keys[i])
						})
					}
				}

				return list;
			})
			const getOrderInfo = () => {
				getCoopOrderInfo({
					coo_order_id: orderInfo.value['id']
				}).then(res => {
					orderInfo.value = res;
					console.log(res, fData);
				});
			}
			onLoad((param : any) => {
				if (param.isPosts === 'true') {
					isPosts.value = true; // 设置isPosts的值为true，表示是帖子查询。
				} else if (param.isPosts === 'false') {
					isPosts.value = false; // 设置isPosts的值为true，表示是帖子查询。
				}
				if (param.id) {
					orderInfo.value['id'] = param.id;
					getOrderInfo();
				} else {
					uni.$wdToast.show("没有订单信息")
					setTimeout(() => {
						router.back({
							delta: 1,
						})
					}, 1000); // 设置提示框显示时间，避免一直显示。
				}
				console.log(isMeet)
			})
			return {
				theme,
				status,
				fileList,
				receive,
				submit,
				upload,
				deleteFile,
				isPosts,
				wdBeforeUpload,
				stepList,
				isMeet,
				checkIn,
				orderInfo,
				fData,
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background: #f2f2f2;
	}

	.container {
		padding: 24rpx;
		padding-bottom: 180rpx;

		.query-info {
			padding: 24rpx;
			width: calc(100% - 24rpx - 24rpx);

			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: PingFang;
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;

				padding-bottom: 24rpx;
				position: relative;

				&::after {
					position: absolute;
					bottom: 0;
					content: " ";
					display: inline-block;
					width: 100%;
					height: 2rpx;
					background: #EEEEEE;
				}

				.payment {
					display: flex;
					align-items: center;




					.payment-number {
						color: #C91C1F;
						font-size: 50rpx;
						margin-left: 20rpx;
					}
				}
			}

			.content {
				padding: 24rpx 0 0;

				&-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 10rpx 0;
					font-family: PingFang;
					font-weight: 500;
					font-size: 28rpx;
					color: #999999;

					&-value {
						color: #000000;
						text-align: right;
						flex: 0 0 calc(100% - 260rpx);
					}

				}
			}

			.money-info {
				position: relative;
				padding-top: 24rpx;
				margin-top: 24rpx;
				// TODO 暂时隐藏
				display: none;

				&::before {
					position: absolute;
					top: 0;
					content: " ";
					display: inline-block;
					width: 100%;
					height: 2rpx;
					background: #EEEEEE;
				}

				.title {
					font-family: PingFang;
					font-weight: bold;
					font-size: 24rpx;
					color: #C91C1F;
				}

				&-item {
					margin-top: 12rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					font-family: PingFang;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;

					&-value {
						color: #C91C1F;
					}
				}
			}
		}

		.posts {
			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: PingFang;
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;

				padding-bottom: 24rpx;
				position: relative;

				&::after {
					position: absolute;
					bottom: 0;
					content: " ";
					display: inline-block;
					width: 100%;
					height: 2rpx;
					background: #EEEEEE;
				}

				.title {
					font-family: PingFang;
					font-weight: bold;
					font-size: 38rpx;
					color: #000000;
					padding: 0;
					text-align: center;

					&::after {
						display: none;
					}
				}
			}
		}

		.query-step {
			margin-top: 24rpx;
			padding: 24rpx;
			width: calc(100% - 24rpx - 24rpx);

			.desc {
				padding: 24rpx 0 0 0;
			}
		}

		.query-remark {
			margin-top: 24rpx;
			padding: 24rpx;
			width: calc(100% - 24rpx - 24rpx);

			.title {
				font-family: PingFang;
				font-weight: 500;
				font-size: 33rpx;
				color: #000000;
				position: relative;
				padding: 12rpx 0 36rpx;
				text-align: center;

				&::after {
					position: absolute;
					bottom: 0;
					left: 0;
					content: " ";
					display: inline-block;
					width: 100%;
					height: 2rpx;
					background: #EEEEEE;
				}
			}

			.desc {
				padding-top: 24rpx;
				font-family: PingFang;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 40rpx;
			}
		}

		.downloads {
			width: calc(100% - 24rpx - 24rpx);
			margin-top: 24rpx;
			padding: 24rpx;

			.title {
				font-family: PingFang;
				font-weight: 500;
				font-size: 33rpx;
				color: #000000;
				position: relative;
				padding: 12rpx 0 36rpx;
				text-align: center;

				&::after {
					position: absolute;
					bottom: 0;
					left: 0;
					content: " ";
					display: inline-block;
					width: 100%;
					height: 2rpx;
					background: #EEEEEE;
				}
			}

			.file-list {
				&-item {
					&-icon {
						width: 40rpx;
						color: #C91C1F;
					}

					&-info {
						display: flex;
						width: calc(100% - 80rpx);
						color: #C91C1F;
					}

					&-delete {
						color: #4A54FF;
					}
				}

			}
		}

		.upload {
			width: calc(100% - 24rpx - 24rpx);
			margin-top: 24rpx;
			padding: 24rpx;
		}

		.photos {
			margin-top: 24rpx;

			.title {
				font-family: PingFang;
				font-weight: 500;
				font-size: 33rpx;
				color: #000000;
				position: relative;
				padding: 12rpx 0 36rpx;
				text-align: center;

				&::after {
					position: absolute;
					bottom: 0;
					left: 0;
					content: " ";
					display: inline-block;
					width: 100%;
					height: 2rpx;
					background: #EEEEEE;
				}
			}

			.desc {
				margin-top: 24rpx;
				padding: 0 24rpx 24rpx;
			}

			.info {
				display: flex;
				justify-content: space-between;
				margin-top: 24rpx;
				padding: 0 24rpx 24rpx;

				.text {
					font-family: PingFang;
					font-weight: 400;
					font-size: 30rpx;
					color: #000000;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
				}

				.img {
					width: 183.33rpx;
					height: 183.33rpx;
					border-radius: 12rpx;
					border: 2rpx solid #7a7a7a;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.card {
			position: relative;
			overflow: hidden;

			&::before {
				content: " ";
				display: inline-block;
				width: 100%;
				height: 8rpx;
				background: #C91C1F;
				position: absolute; // 设置为绝对定位，使其位于card元素下方
				top: 0; // 设置为card元素的下边界位置，使其紧贴底部
				left: 0; // 设置为card元素的左边界位置，使其紧贴左侧
			}
		}


		.footer {
			position: fixed;
			width: calc(100% - 24rpx - 24rpx);
			padding: 0 24rpx;
			bottom: 0;
			left: 0;
			height: 180rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #f2f2f2;

			.after-sales {
				font-family: PingFang;
				font-weight: bold;
				font-size: 22rpx;
				color: #000000;
				text-align: center;
				margin-top: 24rpx;
			}

			.btns {
				width: 100%;
				display: flex;

				justify-content: space-between;
				align-items: center;

				.square {
					flex: calc((100% - 27rpx) / 2);
					margin: 0;
					min-width: auto;

					.wd-button__text {
						display: flex;
						align-items: center; // 垂直居中
						justify-content: center; // 水平居中
						flex-direction: column; // 子元素垂直排列
					}

					.icon-fabu {
						font-size: 40rpx;
						margin-top: 24rpx;
					}
				}

				.square+.square {
					margin-left: 27rpx;
				}
			}
		}


	}
</style>